<template>
  <div class="box">
    <!-- <div class="title el-icon-s-promotion">房产经纪</div> -->
    <!-- default -->
    <div class="bigbox">
      <div class="title-category el-icon-s-promotion">地产分类</div>
    </div>
    <div class="category-list">
      <a href="#" class="category">
        <img
          src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00745-2700.jpg"
          alt=""
        />
        <h3>公寓</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor,
          officia magnam pariatur doloribus temporibus voluptatibus nemo a
          voluptate vel recusandae animi iste hic dolores laudantium illo.
          Minima suscipit nihil aliquam.
        </p>
      </a>
      <a href="#" class="category">
        <img
          src="https://fc1tn.baidu.com/it/u=3779222744,600325449&fm=202&mola=new&crop=v1"
          alt=""
        />
        <h3>别墅</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum,
          harum. Odit sed repellat quis voluptas fuga, sit consequatur
          dignissimos at eaque, fugiat perspiciatis molestias mollitia
          consectetur, quaerat laborum vel in.lore Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Nostrum, harum. Odit sed repellat quis
          voluptas fuga, sit consequatur dignissimos at eaque, fugiat
          perspiciatis molestias mollitia consectetur, quaerat laborum vel
          in.lore Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Nostrum, harum. Odit sed repellat quis voluptas fuga, sit consequatur
          dignissimos at eaque, fugiat perspiciatis molestias mollitia
          consectetur, quaerat laborum vel in.lore Lorem ipsum dolor sit amet
          consectetur adipisicing elit. Nostrum, harum. Odit sed repellat quis
          voluptas fuga, sit consequatur dignissimos at eaque, fugiat
          perspiciatis molestias mollitia consectetur, quaerat laborum vel
          in.lore
        </p>
      </a>
    </div>

    <!-- 根据后台数据 -->
    <!-- <div class="category-list">
      <a
        href="#"
        class="category"
        v-for="item in categoryList"
        :key="item.index"
      >
        <img :src="item.image" alt="" />
        <h3>{{ item.title }}</h3>
        <p>
          {{ item.desc }}
        </p>
      </a>
    </div> -->
  </div>
</template>

<script>
import { getCategoryList } from "@/api/category";
export default {
  data() {
    return {
      pageConfig: {
        _limit: 3,
        _start: 0,
      },
      categoryList: [],
    };
  },
  async created() {
    const res = await getCategoryList();
    this.categoryList = res.data;
  },
};
</script>

<style lang="less" scoped>
.box{
  min-height: 500px;
}
.container {
  margin-top: -40px;
}
.category-list {
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  .category {
    text-align: center;
    width: 378px;
    margin: 0 0.8% 20px;
    padding: 1.5em 1em;
    border: 1px solid #e0e0e0;
    img {
      width: 348px;
      height: 195px;
      object-fit: cover;
    }
    p {
      color: #000;
      margin-top: 15px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3; /*这就是几行的意思  可以自己设定自己要几行展示*/
      -webkit-box-orient: vertical;
    }
    &:hover {
      text-decoration: none;
      background-color: #f8f8f8;
    }
    h3 {
      color: #333;
      font-size: 20px;
      font-weight: bold;
      line-height: 1.3em;
    }
  }
}

.bigbox {
  width: 50%;
  margin: 0 auto;
  .title-category {
    color: #eeac68;
    height: 30px;
    line-height: 30px;
  }
}
</style>